@function rem($px){
  @return $px/75#{rem};
}
$mainColor: #3599ff;
$bg: #f3f3f3;
$headtextColor: #333333;
$bodytextColor: #6b6b6b;
$bg1: #fff;
*{
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.mouse{
  cursor: pointer;
}
.approve_container{
  width: rem(750);
  height: 100vh;
  background: $bg;
  overflow: hidden;
  margin:0 auto;
  @at-root .approve_page_hd{
    width: rem(750);
    line-height: rem(95);
    background: $bg1;
    color: $headtextColor;
    border-bottom: 1px solid #aaaaaa;
    font-size: 0;
    @at-root .approve_item_back{
        width: 25%;
        height: rem(95);
        padding-left: rem(38);
        box-sizing: border-box;
        vertical-align: middle;
        display: inline-block;
      i{
        display: inline-block;
        width: rem(36);
        height: rem(36);
        background: url(.././img/back.png);
        background-position: center;
        background-repeat: no-repeat;
        vertical-align: middle;
        background-size: rem(36);
      }
    }
    @at-root .approve_item_title{
      font-size: rem(35);
      width: 50%;
      text-align: center;
      display: inline-block;
      vertical-align: middle;
    }
    @at-root .approve_item_right{
      height: rem(95);
      width: 25%;
      vertical-align: middle;
      display: inline-block;
    }
  }
  @at-root .state{
    width: 100vw;
    height: rem(100);
    color: #a8a8a8;
    font-size: rem(25);
    padding-left: rem(30);
    padding-top: rem(58);
    box-sizing: border-box;
  }
  @at-root .approve_page_bd{
    width: rem(750);
    @at-root .approve_form_box{
      width: inherit;
      height: rem(190);
      border: 1px solid #e8e8e8;
      border-left:none;
      border-right: none;
      background: #fff;
       @at-root .approve_form_item{
         line-height: rem(90);
         margin-left: rem(30);
         border-bottom: 1px solid #e8e8e8;
         label{
           display: inline-block;
           font-size: rem(31);
           width: rem(140);
           color: #6b6b6b;
         }
         input{
           border:none;
           outline: none;
           font-size: rem(31);
         }
       }
      @at-root .approve_form_item_identity{
        border:none;
        position: relative;
        i{
          display: inline-block;
          width: rem(30);
          height: rem(30);
          background: url(.././img/clear.png);
          position: absolute;
          right: rem(115);
          top: rem(32);
          background-repeat: no-repeat;
          background-position: center;
          background-size: rem(30);
        }
      }
    }
    @at-root .approve_form_item_agreement{
         height: rem(100);
         font-size: rem(28);
         color: #cccccc;
         margin-left: rem(32);
         padding-top: rem(50);
         box-sizing: border-box;
      p{
        display: inline-block;
        width: rem(44);
        height: rem(44);
        border: 1px solid #4db5fb;
        vertical-align: middle;
        text-align: center;
        padding: 0;
        margin: 0;
        i{
          display: inline-block;
          width: rem(36);
          height: rem(36);
          background-image: url(.././img/checked.png);
          background-position: center;
          background-size: cover;
          background-repeat: no-repeat;
          vertical-align: middle;
          margin-left: rem(2);
        }
      }
      span{
        vertical-align: middle;
        a{
          color: #238fff;
          text-decoration: none;
        }
      }
    }
    @at-root .approve_form_item_submit{
      text-align: center;
      margin-top: rem(20);
       input{
         width: rem(710);
         height: rem(75);
         border: none;
         outline: none;
         background: $mainColor;
         border-radius: 8px;
         font-size: rem(35);
         color: #ffffff;
       }
    }
  }
  @at-root .approve_page_ft{
    width: rem(750);
    position: fixed;
    bottom: rem(-434);
    background: #ffffff;
    ul{
      padding: 0;
      margin: 0;
      font-size: 0;
       li{
         display: inline-block;
         line-height: rem(108);
         font-size: rem(40);
         text-align: center;
         width: rem(248);
         list-style: none;
         border-right: 1px solid #898989;
         border-bottom: 1px solid #898989;
         i{
           display: inline-block;
           width: rem(48);
           height: rem(36);
           background-image: url(.././img/cancel.png);
           background-position: center;
           background-repeat: no-repeat;
           background-size: rem(36);
         }
       }
      li:last-of-type{
        background: #d1d5da;
      }
      li:nth-child(3),li:nth-child(6),li:nth-child(9),li:nth-child(12){
        border-right: none;
      }
      li:nth-child(10),li:nth-child(11),li:nth-child(12){
        border-bottom: none;
      }
      li:active{
        background:  #d1d5da;
      }
    }
  }
  @at-root .approve_popup{
    width: rem(750);
    height: 100vh;
    background:rgba(135,135,135,0.6);
    position: fixed;
    top: 0;
    text-align: center;
    vertical-align: middle;
    display: none;
      @at-root .approve_popup_text{
          position: absolute;
          top: 40%;
          left: rem(225);
          width: rem(300);
          background:#ffffff;
          border-radius: rem(2);
          margin: 0 auto;
          font-size: rem(20);
          padding: 0 rem(18) rem(10);
          box-sizing: border-box;
      @at-root .popup_text_hint{
          font-size: rem(17);
          color: #808080;
        }
        @at-root .popup_text_btn{
          margin: 0;
          button{
            border:0;
            outline: none;
            background: #09bb07;
            color: #ffffff;
            padding: rem(5) rem(20);
            border-radius: rem(8);
            vertical-align: middle;
          }
        }
  }
}
  @at-root .approve_correct{
     width: rem(125);
     height: rem(128);
     background: rgba(0,0,0,.5);
     color: #ffffff;
     border-radius: rem(10);
     margin:  0 auto;
     text-align: center;
     overflow: hidden;
     display: none;
    @at-root .approve_correct_icon{
       display: block;
       width: rem(55);
       height: rem(40);
       background: url(.././img/checked.png) no-repeat center;
       background-size: cover;
       margin: rem(20) auto;
    }
    @at-root .approve_correct_passed{
    }
  }
}